<template>

    <div class="Wallet-questions">

        <h2>Frequently Asked Questions</h2>

        <dl>
            <dt @click="openCard($event)">
                <span>How do automatic payments work?</span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>Automatic payment is designed to help you efficiently process your orders and speed up your order
                    fulfillment.</p>
                <p>When you turn on automatic payments for one of your integrated stores, your POD Wallet will start to
                    pay for orders syncing from that store automatically. Please ensure there is sufficient balance in
                    your POD Wallet to prevent payment failures.</p>
            </dd>
        </dl>

        <dl>
            <dt @click="openCard($event)" class="payment">
                <span>Will PODpartner automatically fulfill all my retail orders? </span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>

                <p>If you turn on automatic payments and have a sufficient balance in your POD Wallet, all your
                    PODpartner orders will be automatically paid and sent to production. However, if your retail order
                    contains a non-PODpartner product, you may need to manually complete the payment, depending on your
                    Order import settings.</p>

                <div class="question-images">
                    <figure>
                        <span>1. To turn on automatic payments, please go to Dashboard > Billing > POD Wallet > Click
                            “Turn
                            on automatic payments”.</span>
                        <img src="@/assets/images/billing/wallet-question-01.png" alt="">
                    </figure>
                    <figure>
                        <span>2. To turn on automatic payments, head to Dashboard > Settings > Store Settings > Choose a
                            store > Click “Turn on automatic payments”.</span>
                        <img src="@/assets/images/billing/wallet-question-02.png" alt="">
                    </figure>
                </div>

            </dd>
        </dl>


        <dl>
            <dt @click="openCard($event)">
                <span>What payment methods does POD wallet support for adding funds? </span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>Currently, we only support bank transfers. We are working to add more payment options in the future.
                </p>
            </dd>
        </dl>


        <dl>
            <dt @click="openCard($event)">
                <span>How can I change the region associated with my bank card for adding funds?</span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>When you activate your wallet, you select a region and can only use bank cards from that region and
                    its corresponding currency. If you need to change your selected region, please contact
                    our customer support. We will process your request within one business day.</p>
            </dd>
        </dl>


        <dl>
            <dt @click="openCard($event)">
                <span>Important Notes(Reasons for Failures) </span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>1. To avoid failed transfers, please use a bank card issued by a local bank in your selected region
                    and transfer the corresponding currency. You can see your selected region in the
                    POD wallet/Bank transfer information.</p>

                <br>
                <p>2. Be aware that repeated transfer of the same amount in a short period may trigger bank security
                    review.</p>

            </dd>
        </dl>


        <dl>
            <dt @click="openCard($event)">
                <span>Why do I get a 2% cashback when I add funds using a bank card? </span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>When you add funds via bank transfer, we save on third-party payment processing fees. We pass these
                    savings on to you in the form of a 2% cashback.</p>
            </dd>
        </dl>


        <dl>
            <dt @click="openCard($event)">
                <span>How long does it take for my funds to be deposited to POD wallet?</span>
                <svg-icon name="tree-down" />
            </dt>
            <dd>
                <p>It depends on your bank's location and the transfer method. We will update your wallet balance as
                    soon as we receive the transfer. If your money is not deposited within the expected timeframe,
                    please contact our customer support for assistance.</p>
                <table>
                    <thead>
                        <tr>
                            <th>Bank card issuing region</th>
                            <th>Transfer method</th>
                            <th>Crediting time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="2">United States</td>
                            <td>Fedwire</td>
                            <td>Within 1 business day</td>
                        </tr>
                        <tr>
                            <td>ACH</td>
                            <td>Usually 1 business day, max 3</td>
                        </tr>
                        <tr>
                            <td>Canada</td>
                            <td>-</td>
                            <td>Usually 1 business day, max 3</td>
                        </tr>
                        <tr>
                            <td>United Kingdom</td>
                            <td>-</td>
                            <td>Usually 3 hours, generally 1 business day</td>
                        </tr>
                        <tr>
                            <td>European Union</td>
                            <td>-</td>
                            <td>Within 1 business day</td>
                        </tr>
                    </tbody>
                </table>
            </dd>
        </dl>


    </div>
</template>
<script>
export default {
    data () {
        return {
        };
    },
    computed: {

    },
    methods: {
        openCard (event) {
            const parent = event.target.closest('dl')

            if (parent.classList.contains('active')) {
                parent.setAttribute('class', '')
            } else {
                parent.setAttribute('class', 'active')
            }
        },

        scrollToPayment () {
            const elem = this.$el.querySelector('.payment')
            const box = this.$el.closest('#__layout')
            const top = elem.getBoundingClientRect().top - box.getBoundingClientRect().top
            elem.closest('dl').setAttribute('class', 'active')
            window.scrollTo(0, top)
        }
    },
    created () {
        this.$on('global:wallet-payment', () => this.scrollToPayment())

    }
};
</script>
<style lang="scss" scoped>
.Wallet-questions {

    display: flex;
    flex-direction: column;
    margin-top: 52px;

    h2 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 26px;
        color: #000000;
        line-height: 32px;
        text-align: center;
        margin-bottom: 14px;
    }


    dl {
        margin-top: 20px;
        border-radius: 8px;
        border: 1px solid #E5E5E5;
        overflow: hidden;
        position: relative;

        dt {
            display: flex;
            height: 72px;
            align-items: center;
            background: #FFFFFF;
            padding: 0 24px;
            cursor: pointer;

            span {
                flex: 1;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 18px;
                color: #000000;
                line-height: 24px;
            }

            svg {
                width: 24px;
                height: 24px;
                box-sizing: border-box;
                padding: 5px;
                transition: all 0.2s;
            }
        }

        dd {
            background: #F5F5F5;
            border-top: 1px solid #E5E5E5;
            padding: 20px 24px;
            display: none;

            p {
                font-family: Roboto, Roboto;
                font-weight: 400;
                font-size: 16px;
                color: #292929;
                line-height: 26px;
            }

            .question-images {
                display: flex;
            }


            figure {
                margin-top: 20px;
                display: inline-block;
                width: calc(50% - 10px);

                span {
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    color: #292929;
                    line-height: 26px;
                }

                img {
                    margin-top: 14px;
                    height: 285px;
                    width: 100%;
                }

                &+figure {
                    margin-left: 20px;
                }

            }

            table {
                width: 720px;
                border: 1px solid #E6E6E6;
                margin-top: 16px;

                th,
                td {
                    border: 1px solid #E6E6E6;
                    padding: 0 20px;
                    text-align: left;
                }

                th {
                    height: 48px;
                    background: #FAFAFA;
                    font-family: Roboto-Medium, Roboto;
                    font-weight: 500;
                    font-size: 14px;
                    color: #000000;
                    line-height: 20px;
                }

                td {
                    height: 48px;
                    background: #FFFFFF;
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 14px;
                    color: #000000;
                    line-height: 20px;
                }
            }
        }

        &:hover {
            box-shadow: 0px 4px 5px 1px rgba(0, 0, 0, 0.03);
        }

        &.active {

            dt svg {
                transform: rotate(180deg);
            }

            dd {
                display: block;
            }

        }
    }

}
</style>
